<template>
  <div>
    <el-table
      v-loading = "loading"
      element-loading-text = "查询中..."
      element-loading-spinner = "el-icon-loading"
      element-loading-background="rgba(0,0,0,0.8)"
      :data="queryItems"
      stripe
      style="width: 100%"
      height="530px"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column
        prop="order"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        min-width="300px">
      </el-table-column>
      <el-table-column
        prop="specification"
        label="规格及型号"
        min-width="150px">
      </el-table-column>
      <el-table-column
        prop="unit"
        label="单位"
        min-width="100px">
      </el-table-column>
      <el-table-column
        prop="price"
        label="预（结）算价（元）"
        min-width="200px">
      </el-table-column>
      <el-table-column
        prop="category"
        label="类别"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        show-overflow-tooltip
        min-width="100px"
      >
      </el-table-column>this
    </el-table>
    <div>
      <p style="padding-top:0;margin: 0">当前显示 <span style="color: #3a8ee6">{{this.itemNum}}</span> 条记录</p>
    </div>
    <div>
      <el-dialog
      title="查寻中，请稍后..."
      :visible="dialogVisible"
      width="30%"
      center>
        <span>进度条</span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import { getData } from '../datastore'
import { pagination } from '../utils/utils'
import PinyinMatch from 'pinyin-match'
export default {
  name: 'ItemQuery',
  data () {
    return {
        cellStyle: {
            'text-align': 'center'
        },
        headerCellStyle: {
            'text-align': 'center'
        },
        loading: false,
        queryItems: [],
        allItems: [],
        dialogVisible: false
    }
  },
  computed: {
    ...mapState(['searchContent']),
    ...mapState(['searchLoading']),
      itemNum () {
        return this.queryItems.length
      }
  },
    watch: {
      searchContent () {
          this.filterItems(this.searchContent).then(resp => {
              this.queryItems = resp
          }).catch(err => {
              this.$message({
                  showClose: true,
                  message: err,
                  type: 'error',
                  duration: 2000
              })
          })
      }
    },
    activated () {
      this.allItems = getData('items') || []
        // console.log(this.allItems)
        this.queryItems = pagination(1, 10
            , this.allItems)
    },
    methods: {
        filterItems (search) {
            // this.loadingIn = this.$loading({
            //     lock: true,
            //     text: 'loading',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0,0,0,0.7)'
            // })
            return new Promise((resolve, reject) => {
                if (search) {
                    return resolve(this.allItems.filter(data => {
                        return PinyinMatch.match(data.allInfo, search)
                    }))
                }
                return resolve(pagination(1, 10, this.allItems))
            })
        }
        // headerCellStyle ({ row, column, rowIndex, columnIndex }) {
        //     return 'text-align:center;font-size:15px'
        // }
    }
}
</script>

<style scoped>

</style>
